<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="static/img/灯泡.png" id="h1"><br><br>
<input id="i1" type="button" value="点亮">
<input id="i2" type="button" value="熄灭">
<br>
<textarea id="i5">鼠标选中我</textarea>
<br>
<form>
    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">游戏
    <input type="checkbox" name="hobby">旅游

</form>
<br>
<input id="i3" type="button" value="全选">
<input id="i4" type="button" value="返选">

</body>
<script>
    document.getElementById('i1').onclick = function (){
        document.getElementById('h1').src = 'static/img/dp.png';
    }
    document.getElementById('i2').onclick = function (){
        document.getElementById('h1').src = 'static/img/灯泡.png';
    }
    const checkboxs = document.getElementsByName('hobby');
    document.getElementById('i3').onclick = function (){
        checkboxs.forEach(box=>{
            box.checked = true;
        })
    }
    document.getElementById('i4').onclick = function (){
        checkboxs.forEach(box=>{
            box.checked = false;
        })
    }
    document.getElementById('i5').onmouseover = function (){
        document.getElementById('i5').innerHTML="xixixi"
    }
</script>
</html>